<template>
  <div class="updateTable">
    <div class="updateNav">
      <h3 style="margin: 0; display: inline-block; position: relative; top: 3px;">更新列表</h3>
      <el-dialog
        title="配置上传"
        :visible.sync="dialogConfig"
        width="540px"
        class="safeDisableDialog"
        style="margin-top: 20vh;">
        <el-form :inline="true" class="demo-form-inline" size="small">
          <el-form-item class="updateInput" label="上传内容：">
            <el-select clearable multiple style="width: 100%;" v-model="contentSelection" placeholder="请选择">
              <el-option
                v-for="item in updateContent"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogConfig = false">取 消</el-button>
          <el-button type="primary" style="float: right; height: 30px;line-height: 0px" @click="updateConfigWork()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="日志上传"
        :visible.sync="dialogLog"
        width="540px"
        class="safeDisableDialog"
        style="margin-top: 20vh;">
        <el-form :inline="true" class="demo-form-inline" size="small">
          <el-form-item class="updateInput" label="上传内容：">
            <el-select clearable multiple style="width: 100%;" v-model="logSelection" placeholder="请选择">
              <el-option
                v-for="item in updateLog"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogLog = false">取 消</el-button>
          <el-button type="primary" style="float: right; height: 30px;line-height: 0px" @click="updateLogWork()">确 定</el-button>
        </span>
      </el-dialog>
      <div class="pidSearch">
          <el-form :inline="true"  class="demo-form-inline"  size="mini" >
            <el-form-item label="更新类型：">
              <el-select clearable v-model="value5" placeholder="请选择">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态：">
              <el-select clearable v-model="value6" placeholder="请选择">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button  class="navButton" type="primary" @click="search()">查询</el-button>
            </el-form-item>
          </el-form>
      </div>
      <el-button class="navButton" type="primary" v-on:click="UdialogTurn()" >配置更新</el-button>
      <el-button style="margin-right: 10px" class="navButton" type="primary" v-on:click="MdialogTurn()">程序更新</el-button>
      <el-button class="navButton" type="primary" @click="hardwareRestart()">硬件重启</el-button>
      <el-button class="navButton" type="primary" @click="softwareRestart()">软件重启</el-button>
      <el-button class="navButton" type="primary" @click="dialogConfigOpen()">配置上传</el-button>
      <el-button class="navButton" type="primary" @click="dialogLogOpen()">日志上传</el-button>
    </div>
    <div  class="updateList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%;max-height:528px;overflow-y: auto "
        :height= "528"
        :header-cell-style="{background:'#D8DEE8'}"
      >
        <el-table-column
          prop="index"
          align="center"
          label="序号"
          width="60px"
        ></el-table-column>
        <el-table-column label="站点编号" width="150px" prop="pid" sortable></el-table-column>
        <el-table-column label="站点名称" width="240px" prop="pname"></el-table-column>
        <el-table-column label="程序版本" width="160px" prop="version" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.version}}</span>
            <el-popover
              v-if="scope.row.version !== '' && scope.row.update_type === 'monitor_iot'"
              placement="bottom-start"
              trigger="hover"
              :title = version
              :content= description>
              <i slot="reference" style="position: relative; top: 2px"><img src="../../../../../../../assets/remoteUpdate/QuestionMark.png"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="最近更新时间" width="190px" prop="update_time" sortable></el-table-column>
        <el-table-column label="更新类型" width="150px" prop="update_type">
          <template  slot-scope="scope" >
            <span v-if="scope.row.update_type === 'conf'">配置</span>
            <span v-if="scope.row.update_type === 'monitor_iot'">程序</span>
            <span v-if="scope.row.update_type === 'restart'">重启</span>
            <span v-if="scope.row.update_type === 'upload_config' || scope.row.update_type === 'upload_logs'">上传</span>
          </template>
        </el-table-column>
        <el-table-column label="更新内容" prop="update_content"></el-table-column>
        <el-table-column label="更新状态" width="150px" prop="update_status">
          <template  slot-scope="scope" >
            <span v-if="scope.row.update_status === 1">失败</span>
            <span v-if="scope.row.update_status === 2">成功</span>
            <span v-if="scope.row.update_status === 3">备份</span>
            <span v-if="scope.row.update_status === 4">下载</span>
            <span v-if="scope.row.update_status === 6">安装</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container footerPage">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <update-dialog v-if="UdialogShow" @giveFalse="UdialogReturn"></update-dialog>
    <program-dialog v-if="MdialogShow" @giveFalse="MdialogReturn"></program-dialog>
  </div>
</template>
<script>
  import updateDialog from './MupdateDialog'
  import programDialog from './MprogramDialog'
  import updateMassage from './MupdateMassage'
  import axios from 'axios'

  export default {
    components: {
      updateDialog,
      programDialog,
      updateMassage
    },
    data() {
      return {
        // 站点编号
        searchPid: '',
        name: 'updateTable',
        // 时间
        value1: '',
        value2: '',
        tableData: [],
        // 查询传值
        typeOptions: [{
          label: '配置',
          value: 'conf'
        }, {
          label: '工程',
          value: 'prog'
        }],
        statusOptions: [{
          label: '失败',
          value: 1
        }, {
          label: '成功',
          value: 2
        }],
        value5: '',
        value6: '',
        total: 0, // 总条数
        pidnum: '',
        // 换页
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        // 更新内容
        contentSelection: [],
        logSelection: [],
        updateContent: [{
          label: '联动管理',
          value: 1
        }, {
          label: '工程配置',
          value: 2
        }, {
          label: '安全时段',
          value: 3
        }],
        updateLog: [{
          label: '采集日志',
          value: 1
        }, {
          label: '缓存日志',
          value: 2
        }, {
          label: '配置更新日志',
          value: 3
        }, {
          label: '下载日志',
          value: 4
        }, {
          label: '事件日志',
          value: 5
        }, {
          label: '事件类型日志',
          value: 6
        }, {
          label: '心跳日志',
          value: 7
        }, {
          label: '联动配置日志',
          value: 8
        }, {
          label: '采集端主程序日志',
          value: 9
        }, {
          label: '安全时段日志',
          value: 10
        }, {
          label: '南向接口日志',
          value: 11
        }],
        dialogShow: false,
        dialogConfig: false,
        dialogLog: false,
        description: '', // 描述
        version: '', // 版本号
        tablePid: '',
        submitdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'update_record_query',
          pid: this.$route.query.pid,
          update_type: '',
          update_status: 0,
          page: {
            page_size: '10',
            page_number: '1'
          }
        },
        queryNumList: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'update_get_version_desc',
          pid: this.$route.query.pid,
          program_type: 0
        },
        indexMethod: '',
        UdialogShow: false,
        MdialogShow: false,
        // 重启接口
        restartData: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'update_restart',
          data: {
            pid: this.$route.query.pid,
            restart_type: 0
          }
        },
        // 配置上传/日志上传接口
        collectionUpdate: {
          access_token: localStorage.getItem('access_token'),
          type: 'request_monitor_upload',
          data: {
            pid: this.$route.query.pid,
            upload_type: 1,
            upload_content: [1, 2, 3]
          }
        }
      }
    },
    mounted() {
      this.queryData()
      this.queryupdatelist()
      //      this.A()
      console.log(this.$route.path)
    },
    methods: {
      // 换页
      handleSizeChange(val) {
        this.siteListQuery.limit = val
        this.gettableData()
      },
      handleCurrentChange(val) {
        this.siteListQuery.page = val
        this.tableData()
      },
      // 查询条件
      search() {
        this.submitdata.update_type = this.value5
        if (this.value6 === '') {
          this.submitdata.update_status = 0
        } else {
          this.submitdata.update_status = this.value6
        }
        this.queryData()
      },
      // 获取列表信息
      queryData() {
        // 配置更新总览
        axios.post('/update', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          // var statusArry = []
          this.tableData = res.data.datas
          for (let a = 0; a < res.data.datas.length; a++) {
            this.tableData[a].index = (a + 1) + (res.data.page.page_number - 1) * res.data.page.page_size
          }
          this.total = parseInt(res.data.page.total)
          this.tablePid = this.tableData[0].pid
          console.log(res)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取版本信息
      queryupdatelist() {
        axios.post('/update', this.queryNumList, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          const list = res.data.datas
          for (const querylist in list) {
            this.description = '描述:' + list[querylist].desc
            this.version = '版本号:' + list[querylist].lable
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 更新配置dialog
      remoteUpdateDialo() {
        axios.post('/update', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.get_account_main = res.data.data
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 硬件重启
      hardwareRestart() {
        this.restartData.data.restart_type = 2
        axios.post('/update', this.restartData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.$message({
            type: 'info',
            message: '开始执行硬件重启……'
          })
          console.log(res)
        })
          .catch((error) => {
            console.log(error)
            this.$message({
              type: 'error',
              message: error.data.errmsg
            })
          })
        setTimeout(() => {
          this.queryData()
        }, 2000)
      },
      // 软件重启
      softwareRestart() {
        this.restartData.data.restart_type = 1
        axios.post('/update', this.restartData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.$message({
            type: 'info',
            message: '开始执行软件重启……'
          })
          console.log(res)
        })
          .catch((error) => {
            console.log(error)
            this.$message({
              type: 'error',
              message: error.data.errmsg
            })
          })
        setTimeout(() => {
          this.queryData()
        }, 2000)
      },
      // 当前页
      CurrentChange(val) {
        this.submitdata.page.page_number = (val) + ''
        this.queryData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.submitdata.page.page_size = (pageSize) + ''
        this.queryData()
      },
      // 弹窗传值
      UdialogTurn() {
        console.log('1z1z1z')
        this.UdialogShow = !this.UdialogShow
        console.log(this.UdialogShow)
      },
      MdialogTurn() {
        console.log('1z1z1z')
        this.MdialogShow = !this.MdialogShow
        console.log(this.MdialogShow)
      },
      // 父组件接收值
      UdialogReturn(data) {
        this.UdialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log(data)
        setTimeout(() => {
          this.queryData()
        }, 2000)
      },
      // 父组件接收值
      MdialogReturn(data) {
        this.MdialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11')
        console.log(data)
        setTimeout(() => {
          this.queryData()
        }, 2000)
      },
      // 配置上传
      dialogConfigOpen() {
        this.contentSelection = []
        this.dialogConfig = true
      },
      updateConfigWork() {
        this.collectionUpdate.data.upload_type = 1
        this.collectionUpdate.data.upload_content = this.contentSelection
        axios.post('/upload', this.collectionUpdate, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.queryData()
          this.queryupdatelist()
          this.dialogConfig = false
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
        setTimeout(() => {
          this.queryData()
        }, 2000)
      },
      // 日志上传
      dialogLogOpen() {
        this.logSelection = []
        this.dialogLog = true
      },
      updateLogWork() {
        this.collectionUpdate.data.upload_type = 2
        this.collectionUpdate.data.upload_content = this.logSelection
        axios.post('/upload', this.collectionUpdate, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.queryData()
          this.queryupdatelist()
          this.dialogLog = false
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
        setTimeout(() => {
          this.queryData()
        }, 2000)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .updateTable{
    width: 100%;
    min-height: 500px;
    .updateNav{
      width: 100%;
      min-height: 50px;
      background-color: #F0F3F5;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      line-height: 20px;
      padding: 15px 20px  0px 20px;
      .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        /*padding-top: 10px;*/
      }


    }
    .updateList{
      width: 100%;
      min-height:20vw;
    }
    .footerPage{
      float: right;
      right:20px;
      position: relative;
    }


  }
  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #FAFAFA;
  }
  /deep/  .el-form--inline .el-form-item__content {
    display: inline-block;
    vertical-align: middle;
  }
  .navButton{
    width: 80px;
    height: 30px;
    float: right;
    padding: 0;
    font-size: 14px;
    line-height: 30px;
  }
  .pidSearch{
    display: inline-block;
    height: 34px;
    position: relative;
    top: 0;
    left: 26px;
  }
  /deep/ .el-table--border th, .el-table__fixed-right-patch{
    padding: 3px 0;
  }
  /deep/ .updateInput > .el-form-item__content {
    width: 400px;
  }
  /deep/ .safeDisableDialog > .el-dialog {
    border-radius: 5px;
  }
  /deep/ .safeDisableDialog > .el-dialog > .el-dialog__header {
    font-size: 18px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 39px;
    line-height: 43px;
    padding: 0;
    text-indent: 20px;
    font-weight: bolder;
    background-color: #e3e6ee;
  }
  /deep/ .safeDisableDialog > .el-dialog > .el-dialog__header > .el-dialog__headerbtn {
    top: 10px;
    font-size: 20px;
  }
  /deep/ .safeDisableDialog > .el-dialog > .el-dialog__body {
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
  }
  /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer {
    height: 50px;
    padding: 10px;
  }
  /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer > .dialog-footer > .clears{
    height: 30px;
    padding: 6px 20px;
    background-color: #333B3D;
    border-color: #333B3D ;
    color: #fff;
    float: right;
    margin-left: 10px;
  }
</style>
